'use client';

import React from 'react';
import Title from '../Title';
import { Space } from 'antd';
import StatisticCard from '../StatisticCard';
import CrossCard from '../CrossCard';
import gridCircle from '../ShippingStatistics/grid-circle.svg';
import kgCircle from '../ShippingStatistics/kg-circle.svg';
 import orderCircle from '../ShippingStatistics/order-circle.svg'
import Box from '../CustomerStatistics/Box';
import { useStatisticsData } from '../../hooks/useStatisticsData';

const AirliftStatistics: React.FC = () => {
	const { data } = useStatisticsData();

	return (
		<Space
			style={{
				padding: '12px 12px 20px 24px',
				background: 'rgba(0,0,0,0.1)',
				borderRadius: 16
			}}
			direction="vertical"
			size={12}
		>
			<Title title="集拼出运统计" />
			<Box
				icon={orderCircle.src}
				label="累计订单量"
				value={Number(data?.dedicatedLineOrderYearNum || 0)}
				unit={'单'}
			/>
			<Box
				icon={gridCircle.src}
				label="累计出运量"
				value={Math.round(Number(data?.dedicatedLineOrderYearVal || 0)* 100) /100}
				unit={'CBM'}
			/>
			{/* <Box
				icon={kgCircle.src}
				label="月度出运总重量"
				value={Number(data?.airliftYearWeight || 0)}
				unit={'吨'}
			/> */}
			{/* <CrossCard
				leftTop={<StatisticCard icon={a.src} title="年度出运量" value={Number(data?.airliftYearPcs || 0)} unit="PCS" />}
				rightTop={<StatisticCard icon={a.src} title="月度出运量" value={Number(data?.airliftMonthPcs || 0)} unit="PCS" />}
				leftBottom={<StatisticCard icon={b.src} title="年度空运订单数" value={Number(data?.airliftYearOrderCount || 0)} unit="单" />}
				rightBottom={<StatisticCard icon={c.src} title="年度出运总重量" value={Number(data?.airliftYearWeight || 0)} unit="吨" />}
			/> */}
		</Space>
	);
};

export default AirliftStatistics;

